<template>
    <div class="container-fluid" v-loading="loading">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header"><h4>图片详情</h4></div>
                    <div class="card-body">
                        <div class="masonry-grid gap-2" data-provide="photoswipe">
                            <a class="masonry-item" href="#" v-for="(image,index) in form.images">
                                <img :src="image" alt="The selected child description">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import common from '../../api/public.js';

    export default {
        name: "ImageDetailComponent",
        data(){
            return {
                form:{
                    images: [],
                },
                loading:false,
                id: $('meta[name="id"]').attr('content')
            }
        },
        methods:{
            ...common,
            getInfo:function () {
                let self = this;
                let uri = "image/detail/"+self.id;
                self.loading = true;
                axios.get(uri).then(function (data) {
                    console.log(data)
                    self.form = data.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
        },
        created: function () {
            this.getInfo();
        }
    }
</script>

<style scoped>

</style>
